<template>
    <div class="my-stat">
        <div class="title-row">
            <div class="flex item-center">
                <div class="label-line"></div>
                <span class="title">我的统计</span>

            </div>
            <div class="line"></div>
            <div class="flex">
                <button class="filter-btn" v-on:click="onFilterStat('history')" v-bind:class="{active:filter=='history'}">累计</button>
                <button class="filter-btn" v-on:click="onFilterStat('today')" v-bind:class="{active:filter=='today'}">今日</button>
            </div>
        </div>
        <ul class="stat-content">
            <li class="stat-li">
                <p class="stat-titl">收件</p>
                <p class="stat-num">{{statInfo.acceptAmount || "-"}}</p>
            </li>
            <li class="stat-li">
                <p class="stat-titl">预审</p>
                <p class="stat-num">{{statInfo.pretrialAmount || "-"}}</p>
            </li>
            <li class="stat-li">
                <p class="stat-titl">分发</p>
                <p class="stat-num">{{statInfo.distributeAmount || "-"}}</p>
            </li>
            <li class="stat-li">
                <p class="stat-titl">退回</p>
                <p class="stat-num">{{statInfo.backAmount || "-"}}</p>
            </li>
        </ul>
        <div @click = "jump" class="tips-row">
            <el-badge :value="onlineNum" :max="10" class="item">
                <img src="../../assets/unifyAcceptWorkbench/tips.png" alt="">
            </el-badge>
            <span class="tips-title">网上申办：</span>
            <span>{{onlineNum?"您有新的办件待您审批":"暂无网上申办"}}</span>
        </div>
    </div>
</template>

<script>
import { tyGetCountAll,queryOnline } from "../../config/api";
import Pubsub from "../../utils/pubsub";
export default {
    data() {
        return {
            filter: "history", //history表示累计，today表示今日
            onlineNum:0,
            statInfo: {
                acceptAmount: 0, //手贱数量
                pretrialAmount: 0, //预审数量
                distributeAmount: 0, //分发数量
                backAmount: 0 //驳回数量
            }
        };
    },
    mounted() {
        this.getStat();
        this.queryOnline();

        this.pubsub_token1 = Pubsub.subscribe("PRETRIAL_COUNT",()=>{
            this.getStat();
        })
        this.pubsub_token2 = Pubsub.subscribe("REFRESH_ONLINE", (t, args) => {
            this.queryOnline();
        });
    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
        this.pubsub_token2 && Pubsub.unsubscribe(this.pubsub_token2);
    },
    methods: {
        jump(){
            if(!this.onlineNum){
                return;
            }
            this.$router.push(`/gov/pretrialRegister`);
        },
        queryOnline(){//查询线上申办数据
            queryOnline({pageNum:1,pageSize:999}).then((result = {})=>{
                if(result.data){
                    this.onlineNum = result.data;
                }
            })
        },
        onFilterStat(type) {
            this.filter = type;
            this.getStat({ type });
        },
        /**
         * 请求统计数据
         */
        getStat(r = { type: "history" }) {
            tyGetCountAll(r).then((result = {}) => {
                this.statInfo = result.data || {};
            });
        }
    }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.filter-btn {
    height: 24px;
    width: 45px;
    color: #fff;
    background-color: #898989;
    &:first-child {
        margin-right: 5px;
    }
    &.active {
        background: #822424;
    }
}
.stat-content {
    padding: 25px 0;
    display: flex;
    justify-content: space-around;
    .stat-li {
        background-color: #f5f6fa;
        border-radius: 5px;
        border: solid 1px #cbd1ed;
        flex: 1;
        margin-right: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
        &:last-child {
            margin-right: 0;
        }
    }
    .stat-titl {
        font-size: 16px;
        color: #666;
        margin-bottom: 10px;
    }
    .stat-num {
        font-size: 28px;
        color: #ffaa00;
    }
}
.tips-row{
    display: flex;
    align-items: center;
    padding:15px 20px 10px 25px;
    background: #fff9f1;
    border:1px solid #fee1ac;
    border-radius: 4px;
    margin-bottom: 20px;
    cursor: pointer;

}
.tips-title{
    color:#666;
    margin-left: 15px;
}
</style>
<style>
    .my-stat .el-badge__content.is-fixed{
        background: red;
        right:37px;
    }
    .my-stat .el-badge {
        height:18px;
    }
</style>
